<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0; padding:0;}
.wrap{width:500px; height:400px; border:2px solid #000;}
.wrap>div{width:100px; height:100px;  color:#fff; }
/*
float:none/left/right;
（半）脱离文档流
clear:none/left,right,both;
*/
.wrap .red{background:#d00;height:120px; float:left;}
.wrap>.green{background:#0f0; width:200px;float:left;}
.blue{background:#00d;float:right;}

.wrap .yellow{width:150px; height:150px; background:yellow; float:left;  clear:both;}
.wrap .other{width:50px; height:50px; background:#0ff; float:left;}
.box{width:200px; height:100px; background:#eee;}
.box a{float:right;}
.box p{width:170px; height:30px; background:#f00; clear:right; float:left;}
.box div{width:30px; height:30px; background:#339; float:left;}
</style>
</head>

<body>
<div class="wrap">
	<div  class="red">1</div>
    <div class="green">22222</div>
    <div class="blue">3</div>
    <div class="yellow"></div>
    <div class="other"></div>
</div>
<div class="box">
	<a href="#">注册</a><a href="#">登录</a>
    <p></p>
    <div></div>
</div>
</body>
</html>
